<template>
	<view class="np-coupon-wrap">
		<view class="np-coupon-item">
			<view class="np-item-left">
				<view class="sum-box">
					<text class="np-unit">￥</text>
					<text class="np-sum">{{goods.coupon_quan}}</text>
					<text class="np-sub">优惠券</text>
					<block v-if="goods.coupon_tags_name">
						<text class="np-ic">/</text>
						<text class="np-unit">￥</text>
						<text class="np-sum">{{goods.coupon_tags_price}}</text>
						<text class="np-sub">{{goods.coupon_tags_name}}</text>
					</block>
				</view>

				<view class="np-notice">有效期至 {{endTime}}</view>
			</view>
			<view class="np-item-right">
				<view class="np-btn" @click="buyNow">立即领取</view>
				<view class="np-surplus-num" v-if="!goods.coupon_on">{{surplusText}}{{goods.coupon_surplus}}张</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				endTime: 0,
				surplusText: "剩余",
			}
		},
		props: {
			goods: {},
		},
		created() {
			this.endTime = this.$config.timeFormat(this.goods.coupon_end_time, "yyyy-mm-dd hh:MM");
			if (this.surplus < 20000) {
				this.surplusText = "仅剩";
			}
		},
		methods: {
			buyNow(){
				this.$emit('click');
			}
		}
	}
</script>

<style>
	.np-coupon-wrap {
		background: url('/static/images/coupon_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		border-radius: 10rpx;
		width: 700rpx;
		margin-top: 20rpx;
	}

	.np-coupon-item {
		width: 100%;
		height: 154rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.np-item-left {
		height: 100%;
		padding-left: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	
	.np-unit {
		font-size: 24rpx;
		color: #4f3a1e;
	}
	
	.np-sum {
		font-size: 44rpx;
		font-weight: bold;
		color: #4f3a1e;
		line-height: 55rpx;
		padding-right: 10rpx;
	}
	
	.np-sub {
		font-size: 26rpx;
		color: #4f3a1e;
	}
	
	.np-notice {
		font-size: 22rpx;
		color: #a8700d;
		margin-top: 6rpx;
	}
	
	.np-item-right{
		height: 100%;
		width: 220rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.np-btn {
		width: 160rpx;
		height: 54rpx;
		border-radius: 27rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 24rpx;
		color: rgba(239, 197, 130, 1);
		background: linear-gradient(90deg, rgba(45, 34, 17, 1), rgba(84, 62, 32, 1));
		box-shadow: 0px 2rpx 5rpx 0px rgba(206, 158, 106, 0.46);
	}
	
	.np-surplus-num {
		font-size: 22rpx;
		font-weight: 500;
		color: rgba(168, 112, 13, 1);
		margin-top: 14rpx;
	}
	
	.np-ic {
		font-size: 30rpx;
		color: #FFFFFF;
		font-weight: bold;
		padding: 0 10rpx;
	}
</style>
